<template>
  <div>
    <div v-Color="'red'">红</div>
    <div v-Color="'pink'">粉</div>
    <div v-Color="'blue'">蓝</div>
  </div>
</template>

<script setup lang='ts'>
import type { Directive } from 'vue'

const vColor: Directive<HTMLDivElement, string> = {
  created() {
    console.log('指令初始化调用', '----------created')
  },

  beforeMount() {
    console.log('指令绑定到元素后调用', '----------created')
  },
  mounted(el, binding) {
    console.log('元素插入父级dom后调用', '----------created')
    // console.log(el,binding)
    el.style.backgroundColor = binding.value

  },
  beforeUpdate() {
    console.log('元素被更新之前调用', '----------created')
  },
  updated() {
    console.log('元素被更新之后调用', '----------created')
  },
  beforeUnmount() {
    console.log('元素被移除前调用', '----------created')
  },
  unmounted() {
    console.log('指令被销毁后调用', '----------created')
  }
}

</script>

<style lang='scss' scoped></style>

